<!--
 * @Descripttion:
 * @version:
 * @Author: ZhangXue
 * @Date: 2021-07-23 10:41:36
 * @LastEditors: ZhangXue
 * @LastEditTime: 2021-07-26 17:46:19
-->
<template>
<div class="fd-main-content">
    <!-- 左边部分 开始 -->
    <div class="fd-left-part">
      <!-- 电源基本建设投资完成额 开始 -->
      <div class="fd-half-item">
        <light-title title="电源基本建设投资完成额" sub-title="单位：亿元"></light-title>
        <div class="fd-chart-box">
          <div class="fd-width-100 fd-height-100" v-if="constructionOption.series[0].data.length">
            <draw-chart id="construction" :options="constructionOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!constructionOption.series[0].data.length">暂无数据</div>
        </div>
      </div>
      <!-- 电源基本建设投资完成额 结束 -->
      <!-- 全口径发电设备容量 开始 -->
      <div class="fd-half-item sort">
        <light-title title="全口径发电设备容量" sub-title="单位：万千瓦"></light-title>
        <div class="fd-chart-box">
          <div class="fd-width-100 fd-height-100" v-if="generatingOption.series[0].data.length">
            <draw-chart id="generating" :options="generatingOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!generatingOption.series[0].data.length">暂无数据</div>
        </div>
      </div>
      <!-- 全口径发电设备容量 结束 -->
    </div>
    <!-- 左边部分 结束 -->
    <!-- 中间内容 开始 -->
    <div class="fd-center-part">
      <div class="fd-center-icon">全国用电量</div>
      <div class="fd-center-item a">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">第一产业用电量</p>
      </div>
      <div class="fd-center-item b">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">工业用电量</p>
      </div>
      <div class="fd-center-item c">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">轻工业用电量</p>
      </div>
      <div class="fd-center-item d">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">重工业用电量</p>
      </div>
      <div class="fd-center-item e">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">第三产业用电量</p>
      </div>
      <div class="fd-center-item f">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">城乡居民生活用电量</p>
      </div>
      <div class="fd-center-item g">
        <div class="fd-line-item">
          <p>增长：5.0%</p>
          <p>15,000</p>
        </div>
        <p class="fd-line-text">第二产业用电量</p>
      </div>
    </div>
    <!-- 中间内容 结束 -->
    <!-- 右边部分 开始 -->
    <div class="fd-right-part">
      <!-- 国内细分产业用电量占比统计 开始 -->
      <div class="fd-third-item">
         <light-title title="国内细分产业用电量占比统计"></light-title>
         <div class="fd-chart-box">
           <div class="fd-width-100 fd-height-100" v-if="proportionOption.series[0].data.length">
            <draw-chart id="proportion" :options="proportionOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!proportionOption.series[0].data.length">暂无数据</div>
         </div>
      </div>
      <!-- 国内细分产业用电量占比统计 结束 -->
      <!-- 近两年发电量对比图 开始 -->
      <div class="fd-third-item leftSort">
         <light-title title="近两年发电量对比" sub-title="单位：亿万千瓦"></light-title>
         <div class="fd-chart-box">
           <div class="fd-width-100 fd-height-100" v-if="pasttwoyearsOption.series[0].data.length">
            <draw-chart id="pasttwoyears" :options="pasttwoyearsOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!pasttwoyearsOption.series[0].data.length">暂无数据</div>
         </div>
      </div>
      <!-- 近两年发电量对比图 结束 -->
      <!-- 当月用电情况 开始 -->
      <div class="fd-third-item">
         <light-title title="当月用电情况"></light-title>
         <div class="fd-chart-box">
           <div class="fd-width-100 fd-height-100" v-if="electricityOption.series[0].data.length">
            <draw-chart id="electricity" :options="electricityOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!electricityOption.series[0].data.length">暂无数据</div>
         </div>
      </div>
      <!-- 当月用电情况 结束 -->
    </div>
    <!-- 右边部分 结束 -->
</div>
</template>

<script>
// 引入标题组件
import lightTitle from "@/components/common/lightTitle";
// 引入echarts组件
import drawChart from "@/components/common/drawCharts";
import charts from "@/assets/js/common/charts.js";

export default {
  name: "appStatistics",
  components: { lightTitle, drawChart },
  data () {
    return {
      // 电源基本建设投资完成额图形配置
      constructionOption: this._.cloneDeep(charts.pieOption),
      // 全口径发电设备容量图形配置
      generatingOption: this._.cloneDeep(charts.barOption),
      // 国内细分产业用电量占比统计图形配置
      proportionOption: this._.cloneDeep(charts.lineOption),
      // 近两年发电量对比图形配置
      pasttwoyearsOption: this._.cloneDeep(charts.twoBarOption),
      // 当月用电情况图形配置
      electricityOption: this._.cloneDeep(charts.lineOption)
    };
  },
  created () {
    this.getConstruction();
    this.getGenerating();
    this.getProportion();
    this.getPasttwoyears();
    this.getElectricity();
  },
  methods: {
    // 请求电源基本建设投资完成额
    getConstruction () {
      this.$axios.get(this.$config.url.electricStatistics.getConstructionInvestmentSum).then(res => {
        if (res.code !== 200) {
          this.$message.console.error("数据请求出错！");
          return;
        }
        let _total = 0; ;
        res.data.forEach(val => {
          _total += val.value;
        });
        this.constructionOption.title.subtext = _total;
        this.constructionOption.series[0].data = res.data;
        this.constructionOption.tooltip.formatter = "{b}:{c}亿元";
      });
    },
    // 请求全口径发电设备容量
    getGenerating () {
      this.$axios.get(this.$config.url.electricStatistics.getGeneratingEquipmentCapacity).then(res => {
        if (res.code !== 200) {
          this.$message.console.error("数据请求出错！");
          return;
        }
        const _xData = [];
        const _yData = [];
        res.data.forEach(val => {
          _xData.push(val.name);
          _yData.push(val.value);
        });
        this.generatingOption.xAxis.data = _xData;
        this.generatingOption.series[0].data = _yData;
      });
    },
    // 请求国内细分产业用电量占比统计
    getProportion () {
      this.$axios.get(this.$config.url.electricStatistics.getElectricityConsumptionProportion).then(res => {
        if (res.code !== 200) {
          this.$message.console.error("数据请求出错！");
          return;
        }
        const _legend = [];
        res.data.yData.forEach((val, index) => {
          _legend.push({ name: val.name });
          this.proportionOption.series[index].name = val.name;
          this.proportionOption.series[index].data = val.value;
        });
        this.proportionOption.legend.data = _legend;
        this.proportionOption.xAxis.data = res.data.xData;
      });
    },
    // 请求近两年发电量对比
    getPasttwoyears () {
      this.$axios.get(this.$config.url.electricStatistics.getPastTwoYearsPower).then(res => {
        if (res.code !== 200) {
          this.$message.console.error("数据请求出错！");
          return;
        }
        const _legend = [];
        res.data.yData.forEach((val, index) => {
          _legend.push({ name: val.name });
          this.pasttwoyearsOption.series[index].name = val.name;
          this.pasttwoyearsOption.series[index].data = val.value;
        });
        this.pasttwoyearsOption.xAxis.data = res.data.xData;
        this.pasttwoyearsOption.legend.data = _legend;
      });
    },
    // 请求当月用电情况
    getElectricity () {
      this.$axios.get(this.$config.url.electricStatistics.getElectricityConsumptionByMonth).then(res => {
        if (res.code !== 200) {
          this.$message.console.error("数据请求出错！");
          return;
        }
        const _legend = [];
        res.data.yData.forEach((val, index) => {
          _legend.push({ name: val.name });
          this.electricityOption.series[index].name = val.name;
          this.electricityOption.series[index].data = val.value;
        });
        this.electricityOption.legend.data = _legend;
        this.electricityOption.xAxis.data = res.data.xData;
        this.electricityOption.grid.bottom = "20";
      });
    }
  }
};
</script>

<style lang="less" scoped>
.fd-center-part{
    background: url("../../../static/image/ele/center-bg.png") center 25% no-repeat;
    position: relative;

    .fd-center-icon {
      position: absolute;
      left: 50%;
      top: 42%;
      transform: translate(-50%,-50%);
      text-align: center;
      font-size: 26px;
      color: #fff;
      letter-spacing: 6px;
      height: 170px;
      width: 200px;
      background: url("@{imgUrl}/electric/center-icon.png") center 15px no-repeat;
    }
    .fd-center-item {
        width: 195px;
        height: 180px;
        position: absolute;
        background: url("@{imgUrl}/electric/light-bar.png") center bottom no-repeat;
        transition: all 0.5s;
        &:hover {
          transform: scale(1.1);
          cursor: pointer;
        }
        &.a {
          left: 50%;
          top: 20px;
          margin-left: -97px;
        }
        &.b {
          right: 10px;
          top: 140px;
        }
        &.c {
          right: 10px;
          top: 380px;
        }
        &.d {
          right: 160px;
          top: 580px;
        }
        &.e {
          left: 160px;
          top: 580px;
        }
        &.f {
          left: 10px;
          top: 380px;
        }
        &.g {
          left: 10px;
          top: 140px;
        }
        .fd-line-item {
          width: 100%;
          height: 82px;
          background: url("@{imgUrl}/electric/line-box.png") center top no-repeat;
          color: #00d5ff;
          font-size: 18px;
          text-align: center;
          line-height: 26px;
          padding-top: 14px;
        }

        .fd-line-text {
          color: #fff;
          font-size: 21px;
        }
    }
}
</style>
